<template>
  <el-container class="my-container">
    <el-header height="10">
      <el-space wrap>
        <transition name="el-zoom-in-top">
          <el-form v-show="showSearchForm" ref="searchFormRef" :inline="true" :model="searchData"
                   style="padding-top: 10px;">
            <el-form-item label="定义id" prop="id">
              <el-input v-model="searchData.id" placeholder="定义id" clearable/>
            </el-form-item>
            <el-form-item label="定义key" prop="key">
              <el-input v-model="searchData.key" placeholder="定义key" clearable/>
            </el-form-item>
            <el-form-item label="定义名称" prop="name">
              <el-input v-model="searchData.name" placeholder="定义名称" clearable/>
            </el-form-item>

            <el-form-item>
              <el-upload
                  ref="uploadRef"
                  :http-request="processDeploy"
                  :drag="true"
                  :auto-upload="false"
                  :limit="1"
                  :on-success="handleSuccess"
                  :on-exceed="handleExceed"
              >
                <el-button type="primary">流程部署文件选择</el-button>
              </el-upload>
              <el-button type="success" @click="submitUpload">
                流程部署
              </el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="loadTableData">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </transition>
        <el-button v-show="showSearchForm" type="warning" @click="showSearchForm=false" icon="Hide">隐藏查询条件
        </el-button>
        <el-button v-show="!showSearchForm" type="primary" @click="showSearchForm=true" icon="View">展示查询条件
        </el-button>
      </el-space>
    </el-header>

    <el-main class="my-container-main">
      <el-table :data="tableData" border v-loading="loading" height="100%"
                style="width: 100%;"
      >
        <el-table-column prop="id" type="index" label="序号" width="60">
          <template #default="{row, $index}">
            {{ 1 + $index + (page.size * (page.pageNo - 1)) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template #default="{row}">

          </template>
        </el-table-column>
        <el-table-column prop="id" label="定义ID" sortable show-overflow-tooltip width="350"/>
        <el-table-column prop="key" label="定义KEY" sortable show-overflow-tooltip width="250"/>
        <el-table-column prop="name" label="定义名称" sortable show-overflow-tooltip width="250"/>
        <el-table-column prop="description" label="定义描述" sortable show-overflow-tooltip width="250"/>
        <el-table-column prop="category" label="分类" sortable show-overflow-tooltip width="250"/>
        <el-table-column prop="version" label="版本" sortable width="150"/>
        <el-table-column prop="suspendFlag" label="是否挂起" sortable width="150"/>
      </el-table>
    </el-main>

    <el-footer height="auto">
      <el-pagination @size-change="page.pageNo = 1; loadTableData();" @current-change="loadTableData();"
                     v-model:current-page="page.pageNo" :page-sizes="[1, 10, 20, 50, 100, 1000, 5000]"
                     v-model:page-size="page.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {copyNotEmpty} from "@/core/common/ObjectUtil";
import {definitionPage, processDeploy} from "@/core/api/service";
import {ElMessage, FormInstance, genFileId, UploadInstance, UploadRawFile} from "element-plus";

const searchFormRef = ref<FormInstance>();
const uploadRef = ref<UploadInstance>();
const showSearchForm = ref(true);
const loading = ref<boolean>(false);
const tableData = reactive<any[]>([]);
const page = reactive({
  size: 10,
  pageNo: 1,
  total: 0,
});

const submitUpload = () => {
  uploadRef.value!.submit()
}

const handleExceed = (files: any) => {
  uploadRef.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  uploadRef.value!.handleStart(file)
}

const handleSuccess = (res :any, file: any, fileList: any) => {
  ElMessage({
    showClose: true,
    message: res,
    type: 'success',
  });
  uploadRef.value!.clearFiles()
  loadTableData();
};

function loadTableData() {
  loading.value = true;
  const params = copyNotEmpty({
    ...searchData,
  });
  params['pageSize'] = page.size;
  params['pageNo'] = page.pageNo;

  definitionPage(params).then((data: any) => {
    page.total = data.total;
    const records = data.list;
    tableData.length = 0;
    tableData.push(...records);
    loading.value = false;
  }).catch(err => {
    loading.value = false;
  });
}

const resetForm = () => {
  searchFormRef.value?.resetFields();
  loadTableData();
}
const searchData = reactive({});

onMounted(() => {
  loadTableData();
})

</script>
<script lang="ts">
export default {
  name: "DefinitionManager"
}
</script>

<style scoped>
.my-container {
  height: calc(100vh - 140px);
}

.my-container-main {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
}
</style>